<template>
  <div class="home">
    当前登录用户信息：{{ app.userInfo.name }}, 登录时间 - {{ app.userInfo.loginTime }}
    <div class="control">
      <Button type="primary" size="small" @click="updateLoginUser">更新登录用户</Button>
    </div>
    <div>
      双向绑定vlue的值,看provide下的子组件会不会变化：<input v-model="value" />
    </div>
    <h2>下面是子组件</h2>
    <home-child>
      <template v-slot:default="slotProps">
        <p>A paragraph for the main content.</p>
        <p>我的名字：{{ slotProps.user.firstName }} - {{ slotProps.user.lastName }}</p>
      </template>
    </home-child>
  </div>
</template>

<script>
  import HomeChild from './home-child.vue'
  export default {
    inject: ['app'],
    provide() {
      let data = {}
      Object.defineProperty(data,'value',{
        get: ()=> this.value,
        enumerable: true
      })
      return {
        data
      }
    },
    data() {
      return {
        value: 123
      }
    },
    methods: {
      updateLoginUser() {
        const userInfo = {
          name: 'admin'+this.value,
          loginTime: +new Date
        }
        this.$local.save('user',userInfo)
        this.app.getUserInfo()
      }
    },
    components: {
      HomeChild
    }
  }
</script>

<style lang="scss" scoped>
.home {
  color: #333;
}
</style>